<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { ref, onMounted, shallowRef, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getCategoryList, postArticleAdd } from '@/apis/apis.js'
import { getFormattedDate } from '@/utils/utils.js'

const form = ref({
  title: '',
  author: '',
  url: '',
  content: '',
  sort: '0',
  status: '1',
  category_id: ''
})
const rules = ref({
  title: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入文章标题'
    }
  ],
  author: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入文章作者'
    }
  ],
  content: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入文章内容'
    }
  ],
  category_id: [
    {
      required: true,
      trigger: 'blur',
      message: '请选择文章类别'
    }
  ],
})
const formRef = ref(null)
const options = ref([])
const router = useRouter()
const editorRef = shallowRef()
const toolbarConfig = {}
const editorConfig = {
  placeholder: '请输入内容...'
}

const handleReset = () => {
  form.value = {
    title: '',
    author: '',
    url: '',
    content: '',
    sort: '0',
    status: '1',
    category_id: ''
  }
}
const handleAdd = async () => {
  formRef.value.validate(async (isValid) => {
    if (isValid) {
      const res = await postArticleAdd({
        create_time: getFormattedDate(),
        ...form.value,
        category_id: String(form.value.category_id)
      })
      if (!res.status) {
        ElMessage({ type: 'info', message: res.msg })
      }
      else {
        ElMessage({ type: 'success', message: res.msg })
        router.push('/home/article/list')
      }
    }
  })
}
const handleCreated = (editor) => {
  editorRef.value = editor
}

onMounted(async () => {
  try {
    const res = await getCategoryList({
      id: 1
    })
    if (!res.status) {
      ElMessage({ type: 'info', message: res.msg })
    }
    else {
      options.value = res.data
    }
  }
  catch (err) {
    ElMessage({ type: 'info', message: '网络异常' })
  }
})
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor === null) return
  editor.destroy()
})
</script>

<template>
  <el-form hide-required-asterisk :model="form" :rules="rules" ref="formRef" label-width="80">
    <el-form-item label="类别" prop="category_id">
      <el-select v-model="form.category_id" placeholder="请选择">
        <template v-for="(item, index) in options" :key="index">
          <el-option :label="`${item.level_padding}${item.name}`" :value="item.id" v-if="item.level_padding" />
        </template>
      </el-select>
    </el-form-item>
    <el-form-item prop="title" label="标题">
      <el-input v-model.trim="form.title" placeholder="请填写标题" />
    </el-form-item>
    <el-form-item prop="author" label="作者">
      <el-input v-model.trim="form.author" />
    </el-form-item>
    <el-form-item label="作者网站">
      <el-input v-model.trim="form.url" />
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
          mode="default" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model.trim="form.content" :defaultConfig="editorConfig"
          mode="default" @onCreated="handleCreated" />
      </div>
    </el-form-item>
    <el-form-item label="排序">
      <el-input v-model.trim="form.sort" disabled />
    </el-form-item>
    <el-form-item label="状态">
      <el-radio-group v-model="form.status">
        <el-radio value="1">显示</el-radio>
        <el-radio value="0">隐藏</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>
